
<div class="shaded grid examples">

<div class="ui grid">
  <div class="sixteen column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="fifteen column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="fourteen column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="thirteen column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="twelve column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="eleven column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="ten column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="nine column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="eight column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="seven column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="six column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="five column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="four column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="three column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="two column row">
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="one column row">
    <div class="column"></div>
  </div>
</div>

<div class="ui grid">
  <div class="row">
    <div class="one wide column"></div>
    <div class="fifteen wide column"></div>
  </div>
  <div class="row">
    <div class="two wide column"></div>
    <div class="fourteen wide column"></div>
  </div>
  <div class="row">
    <div class="three wide column"></div>
    <div class="thirteen wide column"></div>
  </div>
  <div class="row">
    <div class="four wide column"></div>
    <div class="twelve wide column"></div>
  </div>
  <div class="row">
    <div class="five wide column"></div>
    <div class="eleven wide column"></div>
  </div>
  <div class="row">
    <div class="six wide column"></div>
    <div class="ten wide column"></div>
  </div>
  <div class="row">
    <div class="seven wide column"></div>
    <div class="nine wide column"></div>
  </div>
  <div class="row">
    <div class="eight wide column"></div>
    <div class="eight wide column"></div>
  </div>
  <div class="row">
    <div class="nine wide column"></div>
    <div class="seven wide column"></div>
  </div>
  <div class="row">
    <div class="ten wide column"></div>
    <div class="six wide column"></div>
  </div>
  <div class="row">
    <div class="eleven wide column"></div>
    <div class="five wide column"></div>
  </div>
  <div class="row">
    <div class="twelve wide column"></div>
    <div class="four wide column"></div>
  </div>
  <div class="row">
    <div class="thirteen wide column"></div>
    <div class="three wide column"></div>
  </div>
  <div class="row">
    <div class="fourteen wide column"></div>
    <div class="two wide column"></div>
  </div>
  <div class="row">
    <div class="fifteen wide column"></div>
    <div class="one wide column"></div>
  </div>
</div>

<div class="ui relaxed grid">
  <div class="eight column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="seven column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="six column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="five column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="four column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="three column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="two column row">
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="one column row">
    <div class="column"></div>
  </div>
</div>

<div class="ui very relaxed grid">
  <div class="eight column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="seven column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="six column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="five column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="four column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="three column row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="two column row">
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="one column row">
    <div class="column"></div>
  </div>
</div>

</div>

<div class="ui clearing section divider"></div>

<div class="nested grid examples">

<div class="ui padded grid">
  <div class="two column row">
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
  </div>
  <div class="three column row">
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
  </div>
  <div class="four column row">
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
  </div>
  <div class="five column row">
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
  </div>
  <div class="six column row">
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
    <div class="column">
      <div class="ui two column grid">
        <div class="column"></div>
        <div class="column"></div>
      </div>
    </div>
  </div>
</div>

</div>

<style type="text/css">

/* Shaded */
.demo .grid.shaded.examples .row {
  position: relative;
}
.demo .grid.shaded.examples .grid > .column {
  position: relative;
  z-index: 11;
}
.demo .grid.shaded.examples .grid .column:not(.row):after {
  background-color: #AAAAAA;
  content: "";
  display: block;
  min-height: 1em;
}

.demo .grid.divided.examples .grid .column:not(.row):after {
  background-color: rgba(0, 0, 0, 0.1);
  content: "";
  display: block;
  min-height: 1em;
}

.demo .grid.nested.examples .grid .grid {
  box-shadow: 0px 0px 0px 1px #F0F0F0 inset;
}
.demo .grid.nested.examples .grid .grid .column:after {
  background-color: #AAAAAA;
  content: "";
  display: block;
  min-height: 1em;
}

.demo .grid.simple.examples .grid .column:not(.row):not(.grid):after {
  content: "";
  display: block;
  min-height: 50px;
}


/* Animation */
.demo .grid.examples {
  margin: 0em !important;
  padding: 0em !important;
}

</style>